import sqTccStationsApi from '../../api/sqTccStations'
import util from '@/libs/util'

export const GgtccMixins = {
  data() {
    return {
      parkInfoVisible: false,
      tccLnBaseInfoData: [
        {label: '停车场总数', value: '-', unit: '个'},
        {label: '停车位总数', value: '-', unit: '个'},
        {label: '已占用车位数', value: '-', unit: '个'},
        {label: '空余车位数', value: '-', unit: '个'}
      ],
      tccBaseInfoData: [
        {label: '停车场总数', value: '-', unit: '个'},
        {label: '停车位总数', value: '-', unit: '个'},
        {label: '已占用车位数', value: '-', unit: '个'},
        {label: '空余车位数', value: '-', unit: '个'}
      ],
      leftChart1: {name: [], value: []},
      leftChart2: {name: [], value: []},
      rightChart1: {name: [], value: []},
      rightChart2: {name: [], value: []},
      allData: null,
      ggtccGrid: {
        left: '3%',
        top: util.fontSize(0.3),
        bottom: util.fontSize(1.3),
        right: '3%'
      }
    }
  },
  methods: {
    // 进入公共停车场页面
    openGgtccPage() {
      this.getTccStationsData()
    },
    // 获取数据
    getTccStationsData() {
      sqTccStationsApi.getTccStationsData()
        .then(res => {
          this.allData = res.data

          // 路内停车场
          this.tccLnBaseInfoData = [
            {label: '停车场总数', value: this.allData.stations_total[0].tcc_num || '0', unit: '个'},
            {label: '停车位总数', value: this.allData.stations_total[0].total || '0', unit: '个'},
            {label: '已占用车位数', value: this.allData.stations_total[0].busy || '0', unit: '个'},
            {label: '空余车位数', value: this.allData.stations_total[0].idle || '0', unit: '个'}
          ]

          // 停车场
          this.tccBaseInfoData = [
            {label: '停车场总数', value: this.allData.stations_total[1].tcc_num || '0', unit: '个'},
            {label: '停车位总数', value: this.allData.stations_total[1].total || '0', unit: '个'},
            {label: '已占用车位数', value: this.allData.stations_total[1].busy || '0', unit: '个'},
            {label: '空余车位数', value: this.allData.stations_total[1].idle || '0', unit: '个'}
          ]

          // 左边图表1
          this.leftChart1 = {name: [], value: []}
          for (let i = 0; i < this.allData.leftChar1.station_name.length; i++) {
            this.leftChart1.name.push(this.allData.leftChar1.station_name[i])
            this.leftChart1.value.push(this.allData.leftChar1.num[i])
          }
          // 左边图表2
          this.leftChart2 = {name: [], value: []}
          for (let i = 0; i < this.allData.leftChar2.station_name.length; i++) {
            this.leftChart2.name.push(this.allData.leftChar2.station_name[i])
            this.leftChart2.value.push(this.allData.leftChar2.num[i])
          }
          // 右边图表1
          this.rightChart1 = {name: [], value: []}
          for (let i = 0; i < this.allData.rightChar1.station_name.length; i++) {
            this.rightChart1.name.push(this.allData.rightChar1.station_name[i])
            this.rightChart1.value.push(this.allData.rightChar1.num[i])
          }
          // 右边图表2
          this.rightChart2 = {name: [], value: []}
          for (let i = 0; i < this.allData.rightChar2.station_name.length; i++) {
            this.rightChart2.name.push(this.allData.rightChar2.station_name[i])
            this.rightChart2.value.push(this.allData.rightChar2.num[i])
          }

          // 地图停车场展示
          const datas = []

          this.allData.stations_detail.forEach(item => {
            const obj = {...item}
            let color = '#00ba30'
            if (item.idle < 10 && item.idle > 0) {
              color = '#0173bf'
            } else if (item.idle <= 0) {
              color = '#bf3d0e'
            }
            obj.markerType = 'ggtcc'
            obj.content = `<div style="width: .3rem;height: .3rem;background: ` + color + `;border-radius: 50%;display: flex;align-items: center;justify-content: center;border: .03rem solid #FFF;position: relative;font-size: .12rem">
                            ` + item.idle + `
                            <div style="width: 0;height: 0;position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 100%);border-top: .1rem solid #FFF;border-right: .07rem solid transparent;border-left: .07rem solid transparent;"></div>
                          </div>`
            obj.position = [item.lng, item.lat]
            datas.push(obj)
          })

          this.$refs.map.addHtmlMarkers(datas, {type: 'ggtcc', pixel: [-util.fontSize(0.3), -util.fontSize(0.7)]})
          this.$refs.map.map.setFitView()
        })
        .catch(() => {

        })
    }
  }
}
